import React from 'react'
import styles from './Home.module.css'
import { MusicHome } from '../../api/index'
import { useEffect,useState } from 'react'
import { useNavigate } from 'react-router-dom'
const Home = () => {
  const router = useNavigate()
  const [musics, setMusics] = useState([])
  useEffect(() => {
    MusicHome().then((res) => {
      var result = res.data.playlists
      console.log(result)
      setMusics(() => {
        musics.push(...result)
        return [...musics]
      })
      // setMusic(result)
    })
  }, [])
  // 事件跳转
  const handleClick = (id)=>{
    console.log(id)
    router(`/music?id=${id}`)
  }
  const List = musics.map(
    (item) => {
      return (
        <div onClick={()=>{handleClick(item.id)}} key={item.id} className={styles.item}>
          <img src={item.coverImgUrl} alt="" />
          <p>{item.name.slice(0, 8) + '...'}</p>
        </div>
      )
    }
  )
  return (
    <div className={styles.home}>
      {List}
    </div>
  )
}
export default Home
